<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>08图形的组合方式</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid khaki;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="500">
			您的浏览器版本过低, 不支持Canvas, 请升级!
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取Canvas
		var firCan = document.getElementById("firCan");
		// 2, 获取 2d渲染上下文
		var context = firCan.getContext('2d');
		
		// 创建圆一
		context.beginPath();
		context.arc(350, 250, 200, 0, Math.PI * 2);
		context.fillStyle = "rgb(255, 0, 0)";
		context.fill();
		/*
		 * 两个名词(概念):
		 * 源(source): 要绘制的新图形
		 * 目标(destination): 可能已经绘制了图形的 2d渲染上下文
		 * 
		 * 
		 * 图形的组合方式: globalCompositeOperation
		 * 1, source-over: 源和目标都绘制, 源在目标上
		 * 2, destination-over: 源和目标都绘制, 目标在源上
		 * 3, source-atop: 绘制目标和重合部分的源, 源在目标上
		 * 4, destination-atop: 绘制源和重合部分的目标, 目标在源上
		 * 5, source-in: 只绘制重叠部分的源
		 * 6, destination-in: 只绘制重叠部分的目标
		 * 7, source-out: 只绘制未重叠部分的源
		 * 8, destination-out: 只绘制未重叠部分的目标
		 * 9, lighter: 源和目标都绘制, 重叠部分, 颜色相加, 最大值 255
		 * 10, copy: 只绘制源
		 * 11, xor: 绘制不重叠部分的源和目标
		 * 
		 * 温馨提示: 个别浏览器不支持全部的11个属性值
		 */
		context.globalCompositeOperation = 'xor';
		// 创建圆二
		context.beginPath();
		context.arc(650, 250, 200, 0, Math.PI * 2);
		context.fillStyle = "rgb(20, 255, 0)";
		context.fill();
		
		
		
	</script>
</html>
